<template>
	<div class="common_card_wrapper" v-loading="loading">
		<el-card shadow="never">
			<el-page-header slot="header" @back="handleReturnPage()" :content="title"></el-page-header>
			<div class="card_detail_wrapper" v-if="type === 'detail'" id="printContent"><slot></slot></div>
			<div class="card_audit_wrapper" v-if="type === 'audit'"><slot></slot></div>
			<div class="card_form_wrapper" v-if="type === 'form'"><slot></slot></div>
		</el-card>
		<div class="button">
			<template v-if="type === 'form'">
				<el-button @click="$router.back()">取消</el-button>
			</template>
			<slot name="button"></slot>
			<template v-if="type === 'detail'">
				<button class="el-button el-button--info" v-print="printButton">
					<i class="sw-icon-btn-print"></i>
					<span>打印</span>
				</button>
			</template>
			<!-- <el-button v-if="type === 'form'" type="primary" icon="sw-icon-view-stroke" @click="handlePreviewData()">预览</el-button> -->
		</div>
	</div>
</template>

<script>
export default {
	props: {
		type: { type: String, default: '' },
		title: { type: String, default: '' },
		loading: { type: Boolean, default: false }
	},
	data() {
		return {
			printButton: {
				id: 'printContent',
				popTitle: '添加'
			}
		};
	},
	methods: {
		handleReturnPage() {
			this.$router.back();
		},

		//预览
		handlePreviewData() {}
	}
};
</script>

<style lang="scss" scoped>
.common_card_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.el-card {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
	}
	.el-card__header {
		padding: 12px;
		flex-shrink: 0;
	}
	.el-card__body {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
	}

	.button {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-shrink: 0;
		margin-top: 16px;
		.el-button {
			display: flex;
			align-items: center;
			padding: 9px 15px;
			font-size: 16px;

			[class*=' sw-icon-'],
			[class^='sw-icon-'] {
				margin-right: 8px;
			}
		}
	}
	.el-page-header__content {
		font-weight: bold;
	}
}
::v-deep .data_detail_button {
	display: flex;
	margin-top: 10px;
	.el-button {
		display: inline-flex;
		font-size: 16px;
		padding: 9px 15px;
		align-items: center;
		[class*=' sw-icon-'],
		[class^='sw-icon-'] {
			margin-right: 8px;
		}
	}
}
.card_form_wrapper::v-deep {
	.el-form-item {
		display: flex;
		flex-wrap: wrap;

		&.entire {
			.el-form-item__content {
				flex: none;
				width: 100%;
			}
		}
	}

	.el-button.download {
		font-size: 16px;
		padding: 9px 0;
	}

	.el-form-item__label {
		font-size: 18px;
		font-weight: bold;
		text-align: left;
		min-width: 120px;
		color: #303133;
	}

	.el-form-item__content {
		flex: 1;
		font-size: 16px;
		p.el-icon-info {
			font-size: 14px;
			color: #c0c4cc;
		}
	}

	.el-input {
		font-size: 16px;
	}

	.el-radio-group {
		display: flex;
		flex-wrap: wrap;
	}

	.el-radio {
		display: flex;
		align-items: center;
		height: 36px;
	}

	.el-radio__label {
		display: flex;
		align-items: center;
		font-size: 16px;

		.el-input {
			width: 100%;
			margin-left: 10px;
		}
	}

	.el-radio__inner {
		width: 16px;
		height: 16px;

		&::after {
			width: 6px;
			height: 6px;
		}
	}

	.el-checkbox-group {
		display: flex;
		flex-wrap: wrap;
	}

	.el-checkbox {
		display: flex;
		align-items: center;
		height: 36px;
	}

	.el-checkbox__inner {
		width: 16px;
		height: 16px;

		&::after {
			width: 4px;
			height: 8px;
		}
	}

	.el-checkbox__label {
		font-size: 16px;
	}
}
::v-deep .audit_form_wrapper {
	padding: 16px 0 0;
	margin-top: 12px;
	border-top: solid 1px #ebeef5;
	.label {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.el-form {
		display: flex;
		flex-wrap: wrap;
	}
	.el-form-item {
		&.audit {
			margin-right: 32px;
		}
		.surplus {
			font-size: 16px;
			margin-left: 10px;
			color: #909399;
		}
		&.content {
			width: 100%;
		}
	}
	.el-form-item__label {
		font-size: 18px;
		font-weight: bold;
		line-height: 32px;
		color: #303133;
	}

	.el-form-item__content {
		display: flex;
		align-items: center;
		span.unit {
			font-size: 16px;
			margin-left: 10px;
		}
	}

	.el-input {
		display: flex;
		width: 160px;
	}

	.el-textarea {
		font-size: 16px;
	}

	p {
		font-size: 16px;
		font-weight: bold;
		margin: 0 10px 0 32px;
	}

	.is-controls-right .el-input {
		font-size: 16px;
	}

	.el-radio__label {
		font-size: 16px;
	}
	.el-radio {
		height: 32px;
		font-weight: bold;
		margin-bottom: 0;

		&.reject {
			color: #f56c6c;

			.el-radio__input.is-checked {
				.el-radio__inner {
					border-color: #f56c6c;
					background: #f56c6c;
				}

				& + .el-radio__label {
					color: #f56c6c;
				}
			}
		}
	}
}
</style>
